<template>
  <v-scale-screen
    :delay="0"
    :box-style="{
      backgroundColor: '#051735',
    }"
  >
    <div class="srceen o-a">
      <Page-title :interval="interval" />
      <div class="pl20 pr20 pt10 pb10">
        <div class="f f-jc-b">
          <div>
            <Environmental />
            <Business />
            <Capacity />
          </div>
          <div>
            <Area />
            <Quality-info />
          </div>
          <div>
            <Monitor />
            <Consumption />
            <Quality />
          </div>
        </div>
      </div>
      <div class="srceen-footer" />
    </div>
  </v-scale-screen>
</template>
<script>
import { mapState } from "vuex";
import Environmental from "@/views/srceen/home/cp/Environmental.vue"; // 环保数据
import Business from "@/views/srceen/home/cp/Business.vue"; // 业务信息
import Capacity from "@/views/srceen/home/cp/Capacity.vue"; // 产能信息
import Area from "@/views/srceen/home/cp/Area.vue"; // 工厂区域
import Consumption from "@/views/srceen/home/cp/Consumption.vue"; // 能源消耗
import Monitor from "@/views/srceen/home/cp/Monitor.vue"; // 视频监控区
import Quality from "@/views/srceen/home/cp/Quality.vue"; // 品质信息
import QualityInfo from "@/views/srceen/home/cp/QualityInfo.vue"; // 品质分析
export default {
  components: {
    Environmental,
    Business,
    Capacity,
    Area,
    Consumption,
    Monitor,
    Quality,
    QualityInfo,
  },
  computed: {
    ...mapState({
      interval: (state) => state.app.srceenDelay,
    }),
  },
};
</script>
<style lang="scss" scoped>
.srceen {
  width: 100%;
  height: 100%;
  background: url("../../../assets/home/screen-bg.png") no-repeat center;
  background-size: 100% 100%;
  .srceen-footer {
    width: 100%;
    height: 37px;
    background: url("../../../assets/home/screen-foot.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>
